<template>
	<view class="content">
		<view class="logo"><image src="../../../static/user/bg.png" mode=""></image></view>
		<view class="phone">132****9653</view>
		<view class="tips">智联技术提供认证服务</view>
		<view class="button"><u-button shape="circle" type="warning" class="styleCss" hover-class="none">手机号一键登录</u-button></view>
		<view class="radio">
			<u-checkbox-group active-color="#FFCC00">
				<u-checkbox 
				 shape="circle"
					label-size="26"
					@change="checkboxChange" 
					v-model="item.checked" 
					v-for="(item, index) in list" :key="index" 
					:name="item.name"
				>{{item.name}}</u-checkbox>
			</u-checkbox-group>
			<p>《<span>服务条款</span>》和《<span>隐私协议</span>》</p>
		</view>
		<view class="rest">
			<u-button type="warning"  hover-class="none" shape="circle" size="medium">其他方式登录</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '登录即代表同意铲屎官的',
					checked: false
				}
			]
		};
	},
	methods: {
		checkboxChange(e) {}
	}
};
</script>

<style lang="scss" scoped>
.rest{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 30px;
	left: 0;
}
.radio{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	p{
		margin-left: -10px;
		font-size: 26rpx;
		color: #333333;
		span{
			font-size: 26rpx;
			color: #CBCBCB;
		}
	}
}
.button /deep/ .u-size-default {
	height: 90rpx;
}
.button /deep/ .u-btn--warning {
	background-color: #FFCC00;
	border-color: #FFCC00;
}
.styleCss {
	width: 600rpx;
}
.button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40rpx;
}
.tips {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333333;
	font-size: 13px;
	margin: 160rpx 0 50rpx 0;
}
.phone {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #333333;
	font-weight: bold;
}
.logo {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 120rpx 0 60rpx 0;
	image {
		width: 240rpx;
		height: 240rpx;
		border-radius: 20rpx;
	}
}
.content {
	width: 100%;
	display: flex;
	flex-direction: column;
}
</style>
